<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebGL 三维纹理</title>
  <style>
    @import url("https://webglfundamentals.org/webgl/resources/webgl-tutorials.css");

    body {
      margin: 0;
    }

    canvas {
      width: 100vw;
      height: 100vh;
      display: block;
      background: rgba(0, 0, 0, 0.51);
    }
  </style>
</head>

<body>
  <canvas id="canvas"></canvas>
  <!-- vertex shader -->
  <script id="vertex-shader-3d" type="x-shader/x-vertex">
  attribute vec4 a_position;
  attribute vec2 a_texcoord;
  
  uniform mat4 u_matrix;
  
  varying vec2 v_texcoord;
  
  void main() {
    // Multiply the position by the matrix.
    gl_Position = u_matrix * a_position;
  
    // Pass the texcoord to the fragment shader.
    v_texcoord = a_texcoord;
  }
  </script>
  <!-- fragment shader -->
  <script id="fragment-shader-3d" type="x-shader/x-fragment">
  precision mediump float;
  
  // Passed in from the vertex shader.
  varying vec2 v_texcoord;
  
  // The texture.
  uniform sampler2D u_texture;
  
  void main() {
     gl_FragColor = texture2D(u_texture, v_texcoord);
  }
  </script><!--
  for most samples webgl-utils only provides shader compiling/linking and
  canvas resizing because why clutter the examples with code that's the same in every sample.
  See https://webglfundamentals.org/webgl/lessons/webgl-boilerplate.html
  and https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
  for webgl-utils, m3, m4, and webgl-lessons-ui.
  -->
  <script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>
  <script src="https://webglfundamentals.org/webgl/resources/m4.js"></script>
  <script src="./webgl-3d-textures.js"></script>
</body>

</html>